<template>
  <page-header class="my-15px" :count="count" :title="title" :menuId="menuId" is-small/>
  <div>
    <div :class="ns.e('tabs')">
      <span
        :class="[ns.e('tab'), ns.is('active', queryData.type === tab.code)]"
        v-for="tab in tabs" :key="tab.code" @click="changeTab(tab.code)">{{ tab.name }}</span>
    </div>
  </div>
  <div class="page-content-screen">
    <div class="screen">
      <vc-filter :menus="screen"/>
    </div>
    <div class="total">共计 <span style="color: #FF5959;">{{ totalNum}}</span> 条</div>
  </div>
  <div class="page-content-table">
    <vc-table
      v-if="queryData.type !== 4"
      :loading="loading"
      :tableData="tableData"
      :columns="columns"
      :total="totalNum"
      :pageSize="PAGE_SIZE"
      :pageNum="queryData.pageNum"
      :maxHeight="800"
      @page-change="handleCurrentChange"
      @sort-change="sortChange"
    />
    <vc-table
      v-else
      :loading="loading"
      :tableData="tableData"
      :columns="columnsPermit"
      :total="totalNum"
      :pageSize="PAGE_SIZE"
      :pageNum="queryData.pageNum"
      :maxHeight="800"
      @page-change="handleCurrentChange"
      @sort-change="sortChange"
    />
  </div>
</template>

<script lang="ts" setup>
import PageHeader from '../../../../components/page-header.vue';
import {getMonitoring, getSupervisoryMonitorType} from "@/views/modules/enterprise/apis";
import {useTable} from './useTable';
import {useScreen} from './useScreen';
import {usePage} from '@/use/usePage';
import {useNamespace} from "vc/src/use";
import { useF9Context } from '../../../../use/use-context';
const ns = /* hoist-static*/ useNamespace('overProofMonitor');
defineOptions({name: ns.b()});
const tabs = [
  {name: '监督监测超排', code: '1'},
  {name: '自行监测超排', code: '2'},
  {name: '排污执行报告超排', code: '4'},
];

interface Props {
  /** 标题名称 */
  title: string;
  /** 标题 id */
  menuId: string;
  /** 数值 */
  count: number | null;
}
const { companyId } = useF9Context();
const route = useRoute();
const {PAGE_SIZE, screen, queryData} = useScreen(companyId, 2);
const {title, menuId, count} = defineProps<Props>();
const changeTab = (code: string) => {
  queryData.type = code;
};
queryData.id = companyId;
queryData.overproof = true;
const {data: typeData} = useRequest(getSupervisoryMonitorType, {
  defaultParams: [{id: companyId}],
  onSuccess: (data) => {
    queryData.type = data || '1';
  }
});
const {data, loading, run} = useRequest(getMonitoring, {
  manual: true,
  defaultParams: [{...queryData}],
  onSuccess: (data) => {
    tableData.value = data.monitorItems;
    totalNum.value = data.totalMonitorCount;
  }
});
const {
  tableData,
  totalNum,
  searchTxt,
  handlerInput,
  handleCurrentChange,
  sortChange
} = usePage(queryData, run);
const {columns, columnsPermit} = useTable(tableData);
</script>

<style scoped lang="scss">
$name: 'overProofMonitor';
@include b($name) {

  @include e(tabs) {
    display: inline-flex;
    gap: 30px;
    margin-bottom: 10px;
    @include e(tab) {
      padding: 4px 12px;
      font-size: 14px;
      border-radius: 10px;
      cursor: pointer;
      background: #f9f9f9;
      @include when(active) {
        position: relative;
        color: #409eff;
        background-color: #f5faff;
        //&::after {
        //  content: '';
        //  position: absolute;
        //  left: 50%;
        //  bottom: -2px;
        //  transform: translateX(-50%);
        //  width: 26px;
        //  height: 2px;
        //  background-color: #409eff;
        //  border-radius: 5px;
        //}
      }
    }
  }
}

.page-content-screen {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(0, 0, 0, 0.85);

  .screen {
    display: flex;
    align-items: center;
    gap: 40px;
  }

  .total {
    font-size: 12px;
    line-height: 24px;
  }
}
</style>
